<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
</head>

<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <!-- 什么是生命周期？ 从生到死 -->
        <!-- 如何理解生命周期在Vue中的概念 -->
        <!-- 每一个Vue程序都可能会经历从创建、挂载、更新、卸载等一系列的过程； -->

        <!-- 生命周期函数 钩子函数 -->

        <p id="p">{{msg}}</p>

    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                msg: 'hello world'
            },
            methods: {
                show() {
                    console.log("show");
                }
            },
            beforeCreate() {
                // 第一个生命周期函数，表示实例完全被创建之前会执行的函数
                // console.log(this.msg);//undefined
                // this.show()//Error in beforeCreate hook: "TypeError: this.show is not a function"
                console.log("boforeCreate");
            },
            created() {
                // 第二个生命周期函数，在created中data和methods都已被初始化
                // 推荐对data，methods，只做一次， 一般在created去做
                // console.log(this.msg);//ok
                // this.show()//ok
                console.log("created");
            },
            beforeMount() {
                // 第三个生命周期函数，表示模板已经在内存中编译完了，但是尚未把模板渲染到页面中
                // console.log(document.getElementById("p").innerText);//{{msg}}
                console.log("beforeMount");
            },
            mounted() {
                // 第四个生命周期函数，表示模板已经在内存中编译完了，且渲染到页面中
                // console.log(document.getElementById("p").innerText);//hello world
                console.log("mounted");
            },
            beforeUpdate() {
                // 第五个生命周期函数，表示界面还没有更新，但是数据已经变化了/更新了
                // console.log(document.getElementById("p").innerText);//还没更新数据之前的值 hello world
                console.log("beforeUpdate");
            },
            updated() {
                // 第六个生命周期函数，表示数据更新完了，同时界面也更新完毕。
                console.log(document.getElementById("p").innerText);//Shane
                console.log("updated");
            },
            beforeDestroy() {
                // 第七个生命周期函数，当vm.$destroy()被调用时，实例未被销毁前触发。
                console.log("beforeDestroy");
            },
            destroyed() {
                // 第八个生命周期函数，当vm.$destroy()被调用后，实例被销毁后触发。
                console.log("destroyed");
            }
        })
    </script>
</body>

</html>